<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <style></style>
  </head>
  <body>
    <!-- 顶部固定区域 -->
    <div class="top"><div class="top_title">智慧商城</div></div>
    <!-- 搜索区域 -->
    <div class="serceh">
      <div class="input">
        <i class="iconfont icon-sousuo"></i><span>搜索你要找的商品</span>
      </div>
    </div>
    <!-- 轮播图 -->
    <!-- banner -->
    <div class="diy-banner">
      <!-- Swiper -->

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/banner.jpg" alt="" />
          </div>

          <div class="swiper-slide">
            <img src="./imgs/banner.jpg" alt="" />
          </div>

          <div class="swiper-slide">
            <img src="./imgs/banner.jpg" alt="" />
          </div>
        </div>

        <!-- Add Pagination -->

        <div class="swiper-pagination"></div>

        <!-- Add Arrows -->

        <!-- <div class="swiper-button-next"></div> -->

        <!-- <div class="swiper-button-prev"></div> -->
      </div>
    </div>
    <!-- 新闻栏 -->
    <div class="news">
      <div class="laba"><i class="iconfont icon-xiaolaba"></i></div>
      <span class="newtex">智慧商城2.0全新上线，更多新品等你来选~</span>
      <!-- <span class="newtex">智慧商城2.0全新上线，更多新品等你来选~</span> -->
      <div class="right"></div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <ul>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
        <li>
          <img src="./imgs/new.png" alt="" />
          <div class="tex">新品首发</div>
        </li>
      </ul>
    </div>
    <!-- 主会场图片 -->
    <div class="zhuhc"><img  src="./imgs/zhuhc.png" alt="" /></div>
    <!-- 猜你喜欢 -->
    <div class="guss">
      <p>—— 猜你喜欢 ——</p>
    </div>

    <!-- 商品 -->
    <div class="goods">
      <ul>
        <li>
          <div class="left"><img src="./imgs/product.jpg" alt="" /></div>
          <div class="right">
            <h5 class="ellipsis-2">
              三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景
              悠雾紫 5G手机 游戏拍照旗舰机s23
            </h5>
            <span>已售1201000件</span>
            <span class="price">¥0.01 <i>¥6699.00</i></span>
          </div>
        </li>
      </ul>
    </div>

    <!-- 底部快捷导航 -->
    <div class="footer">
      <ul>
        <li class="active">
          <i class="iconfont icon-shouye-zhihui"></i>
          <p>首页</p>
        </li>
        <li>
          <i class="iconfont icon-fenlei"></i>
          <p>分类</p>
        </li>
        <li>
          <i class="iconfont icon-gouwuche"></i>
          <p>购物车</p>
        </li>
        <li>
          <i class="iconfont icon-wode"></i>
          <p>我的</p>
        </li>
      </ul>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script src="./js/commen.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination', // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 2500,
        // loop:true,
        autoplayDisableOnInteraction: false
      })
    </script>

    <!-- js -->
  </body>
</html>
